<template>
    <div class="menuTreeWrap">
        <!-- :tree-data="treeList" -->
        <a-spin :spinning="loading.getLoading">
            <a-tree :replaceFields="replaceFields" :blockNode="true" :tree-data="treeList" :selectedKeys="selectedKeys"
                @select="select" :defaultExpandAll="defaultExpandAll" v-if="treeList.length > 0">
                <template #title="{ name, id }">
                    <div class="itemRowWrap">
                        <div class="nameInfo">{{ name }}</div>
                        <!-- <a-button size="small" @click="handleEdit(title)" :ghost="true"> -->
                        <a-space class="optionsBtn" @click.stop="spaceClick(id)">
                            <AddButton :menuId="menuId" :ids="id" :onRefresh="onRefresh" from="tree" fromType="edit"
                                :aParams="{ type: 'edit' }">
                            </AddButton>
                            <AddButton :menuId="menuId" :ids="id" :onRefresh="onRefresh" from="tree" fromType="add"
                                :aParams="{ type: 'add' }">
                            </AddButton>
                            <a-popconfirm @confirm="deleteClick(id)" :title="`确定要删除该${menuId == '9' ? '菜单' : '组织架构'}吗？`"
                                ok-text="确定" cancel-text="取消">
                                <a-tooltip title="删除">
                                    <a-button type="link" style="color:red;" size="small" @click="spaceClick(id)">
                                        <Icons class="iconButton delete" type="delete" />
                                    </a-button>
                                </a-tooltip>
                            </a-popconfirm>
                        </a-space>
                        <!-- </a-button> -->
                    </div>
                </template>
            </a-tree>
        </a-spin>
    </div>
</template>
<script>
import Icons from './Icons';
import AddButton from './AddButton.vue';
export default {
    name: 'MenuTree',
    components: {
        Icons,
        AddButton,
    },
    props: {
        menuId: {
            type: [Number, String],
        }
    },
    data() {
        return {
            treeList: [],
            replaceFields: {
                children: 'child',
                title: 'name',
                key: 'id',
            },
            selectedKeys: [],
            defaultExpandAll: true,
            loading: {
                getLoading: false
            }
        }
    },
    methods: {
        select(e) {
            this.selectedKeys = e;
        },
        getTreeData() {
            let url;
            if (this.menuId == '9') {
                url = this.$getformmenudiytree
            } else if (this.menuId == '13') {
                // url = this.$getformdepttree
            }
            if (!url) {
                return
            }
            this.loading = {
                ...this.loading,
                getLoading: true,
            }
            this.getAxios(url, {}).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    this.treeList = data;
                }
            }).finally(() => {
                this.loading = {
                    ...this.loading,
                    getLoading: false,
                }
            });
        },
        handleEdit() { },
        spaceClick(e) {
            if (e) {
                this.selectedKeys = [e];
            }
        },
        // 删除
        deleteClick(e) {
            let params = {
                id: e
            }
            let url;
            if (this.menuId == '9') {
                url = this.$delformmenudiytree
            } else if (this.menuId == '13') {
                url = this.$delformdeptdiytree
            }
            if (!url) {
                return
            }
            this.getAxios(url, params).then((res) => {
                if (res.code == 200) {
                    let data = res.data;
                    this.$message.success(data)
                    this.onRefresh();
                }
            }).finally(() => {
            });
        },
        // 编辑
        editClick() { },
        // 新增
        addClick() { },
        // 刷新 派发
        onRefresh() {
            this.getTreeData();
            try {
                this.$bus.$emit('menuOnRefresh', {});
            } catch (err) {
            }
        }
    },
    mounted() {
    },
    watch: {
        menuId: {
            handler() {
                this.treeList = [];
                this.getTreeData();
            },
            immediate: true,
        }
    }
}
</script>
<style lang="less" scoped>
.menuTreeWrap {
    height: 100%;
    width: 500px;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
}

.itemRowWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .optionsBtn {
        display: none;
    }

    &:hover {
        .optionsBtn {
            display: flex;
        }
    }
}


::v-deep {
    .ant-tree-treenode-selected {

        .optionsBtn {
            display: flex;
        }

        ul {
            .optionsBtn {
                display: none;
            }
        }
    }
}


.iconButton {
    cursor: pointer;
}

.delete {
    color: red;
}

.nameInfo {
    max-width: calc(100% - 110px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>